<template>
    <div class="login-container">
        <!-- 导航栏 -->
        <van-nav-bar
          class="app-nav-bar"
          title="登录 / 注册"
          left-arrow
          @click-left="$router.back()"
        />
        <!-- 导航栏 -->

        <!-- 登录表单 -->
        <!--
            基于vant的表单验证：
            1.使用van-form组件包裹所有的表单项van-field
            2.给van-form绑定submit事件
              当表单提交的时候会触发submit事件
              提示：只有表单验证通过，它才会调用submit
            3.使用Field的rules属性定义校验规则
            -->
        <van-form 
          :show-error="false"
          :show-error-message="false"
          validate-first
          ref="login-form"
          @submit="onLogin"
          @failed="onFailed"
         >
        <van-field
          v-model="user.mobile"
          icon-prefix="toutiao"
          left-icon="shouji"
          center
          placeholder="请输入手机号"
          name="mobile"
          :rules="formRules.mobile"
        />
        <van-field
          v-model="user.code"
          clearable
          icon-prefix="toutiao"
          left-icon="yanzhengma"
          center
          placeholder="请输入验证码"
          name="code"
          :rules="formRules.code"
        >
          <template #button>
              <van-count-down 
                v-if="isCountDownShow"
                :time="1000 * 60" 
                format="ss s" 
                @finish="isCountDownShow = false"
              />
            <van-button
                v-else
                class="send-btn"
                :loading="isSendSmsLoading"
                size="small"
                round
                @click.prevent="onSendSms"
            >发送验证码</van-button>
          </template>
        </van-field>
        <div class="login-btn-wrap">
        <van-button
          class="login-btn"
          type="info"
          block
        >登录</van-button>
        </div>
        </van-form>
        <!-- 登录表单 -->
    </div>
</template>

<script>
import { login, sendSms } from '@/api/user'
import { Toast } from 'vant'

export default {
    name: 'LoginIdex',
    components: {},
    props: {},
    data () {
        return {
            user: {
                mobile: '', //手机号
                code: '', //验证码
            },
            formRules: {
                mobile: [
                    { required: true, message: '手机号不能为空' },
                    { pattern: /^1[3|5|7|9]\d{9}$/,message:'手机号格式错误' }
                    ],
                    code: [
                        { required: true, message: '请输入验证码' },
                        { pattern: /^\d{6}$/,message:'验证码格式错误' }
                    ]
            },
            isCountDownShow: false, // 控制倒计时和发送按钮的显示状态
            isSendSmsLoading: false // 发送验证码按钮的 loading 状态
        }
    },
    computed: {},
    watch: {},
    created () {},
    mounted () {},
    methods: {
        async onLogin () {
            Toast.loading({
             message: '登录中...',
             forbidClick: true,
             duration: 0
            });
            
            //1.找到数据接口
            //2.封装请求方法
            //3.请求调用登录
            try {
            const { data } = await login(this.user)
            Toast.success('登录成功')

            //将后端返回的用户登录状态（token等数据）放到Vuex容器中
            this.$store.commit('setUser',data.data)

            // 清除 layout 的缓存，让它重新渲染
            this.$store.commit('removeCachePage', 'LayoutIndex')

            //登陆成功，跳转回原来页面
            // this.$router.back() //先用这种方式，但是它不太好，有问题
            this.$router.push(this.$route.query.redirect || '/')

            } catch (err) {
                console.log(err)
                Toast.fail('登录失败，手机号或验证码错误')
            }
            //4.处理响应结果
        },

        onFailed (error) {
            if (error.errors[0]) {
                this.$toast({
                    message: error.errors[0].message,//提示消息
                    position: 'top'
                })
            }
        },

       async onSendSms () {
           try {
                //验证手机号码
               await this.$refs['login-form'].validate('mobile')

               //验证通过，请求发送验证码
               this.isSendSmsLoading = true //展示按钮的 loading 状态，防止网络慢用户多次点击出发发送行为
               await sendSms(this.user.mobile)

               // 短信发出去了，隐藏发送按钮，显示倒计时
               this.isCountDownShow = true

               // 倒计时结束 -> 隐藏倒计时，显示发送按钮（监视倒计时的 finish 事件处理）
           } catch (err) {

               //发送短信失败的错误提示
               let message = ''
               if (err && err.response && err.response.status === 429) {
                   message = '发送太频繁，请稍后重试'
               } else if (err.name === 'mobile') {

               // 表单验证失败的错误提示
               message = err.message 
           } else {

               //未知错误
               message = '发送失败，请稍后重试'
           }

           // 提示用户
           this.$toast({
                    message,
                    position: 'top'
                })
           }

           //无论发送验证码成功还是失败，最后都要关闭发送按钮的 loading 状态
           this.isSendSmsLoading = false

            // this.$refs['login-form'].validate('mobile').then(
            //     data => {
            //         console.log(data)
            //     }
            // )
            //验证通过->请求发送验证码->用户接收短信->输入验证码->请求登录
            //请求发送验证码->隐藏发送按钮，显示倒计时
            //倒计时结束->隐藏倒计时，显示发送按钮
        }
    }
}
</script>

<style scoped>
.login-btn-wrap{
    padding: 26px 16px;
}
.login-btn{
    background-color: #6db4fb;
    border: none;
}
.van-button__text{
    font-size: 15px;
}
.send-btn{
    width: 80px;
    height: 25px;
    background-color: #ededed;
}
.send-btn span{
    font-size: 11px;
    color: #666666;
}
/deep/.van-icon{
    color: #fff;
}
</style>